<template>
  <div class="protal-nav-wrapper" v-if="listData.length>0">
    <div class="portal-list" v-show="close">
      <div class="portal-list-item-header" @click="close=false">
        <div class="portal-list-item-header-close">
          <i class="el-icon-arrow-down"></i>
        </div>
        <span class="portalNav-text">工作台</span>
      </div>
      <!-- <Icon :type="item.icon || 'icon-dashuju'" size="30"></Icon> -->
      <div class="portal-list-item" v-for="item in listData" :key="item.id" @click="handClickItemFun(item)">
        <Icon :type="item.icon" size="30"></Icon>
        <span class="portalNav-text">{{item.name}}</span>
      </div>
    </div>
    <transition name="el-fade-in-linear">
      <div class="portalNav" @click="handleClick" v-show="!close">
        <Icon type="icongongneng" size="30"></Icon>
        <span class="portalNav-text">工作台账</span>
      </div>
    </transition>
  </div>
</template>

<script>
import { axiosGetSysWorkMenu } from "@/api/home";
import { mapGetters } from "vuex";
export default {
  name: "portalNav",
  watch: {
    "system.id": async function (nVal) {
      let params = {
        productCode: this.systemInfo.productCode,
        systemId: this.system.id,
        tenantId: this.tenant.id
      };
      let data = await this.axiosGetSysWorkMenuFun(params);
      this.listData = data;
    }
  },
  async created () {
    let params = {
      productCode: this.systemInfo.productCode,
      systemId: this.system.id,
      tenantId: this.tenant.id
    };

    let data = await this.axiosGetSysWorkMenuFun(params);
    this.listData = data;
    console.log(this.listData);
    this.$store.commit("nav/SET_NAV_LIST", this.listData);
  },
  computed: {
    cClass () {
      return [
        {
          "close": this.close
        }
      ];
    },
    ...mapGetters(["systemInfo", "tenant", "system"])
  },
  data () {
    return {
      close: false,
      listData: []
    };
  },
  methods: {
    handleClick () {
      console.log("click");
      this.close = true;
    },
    handClickItemFun (item) {
      if (item.openType === "2") { // iframe
        this.$router.push({
          path: "/frame/" + item.id,
          query: {
            isNotMenu: true
          }
        });
      } else if (item.openType === "1") {
        this.$router.push({
          path: item.path
        });
      } else if (item.openType === "3") {
        window.open(item.path);
      }

    },
    axiosGetSysWorkMenuFun (params) {
      return new Promise(resolve => {
        axiosGetSysWorkMenu(params).then(res => {
          // console.log(res);
          if (res.data.code === 0) {
            resolve(res.data.data);
          } else {
            resolve({});
          }
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.protal-nav-wrapper{
  position: absolute;
  right: 5px;
  top: 20%;
  // .bgColor();
  background-color:#fff;
  .portalNav{
    position: relative;
    width: 80px;
    height: 80px;
    background-color:#fff;
    border-radius: 8px;
    cursor: pointer;
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .boxshadow(1px,2px,2px,.bgColor());
    // color: #ffffff;
    .color();
    transition:all 0.5s;
    z-index:1000;
    .portalNav-text{
      font-size: 16px;
      .color();
    }
    // &:hover{
    //   background-color: #dddddd !important;
    //   box-shadow: 1px 2px 5px #333;
    //   .color()
    // }
    &.close{
      right:-100px;
    }
  }
  .portal-list{
    z-index:9999;
    position: relative;
    border-style:solid;
    border-width:1px;
    .borderColor(border-left-color);
    .borderColor(border-right-color);
    .borderColor(border-top-color);
    .borderColor(border-bottom-color);
    padding:5px;
    border-radius:4px;
    // box-shadow: 1px 2px 5px #333;
     background-color:#fff;
     .boxshadow(1px,2px,2px,.bgColor());
    .portal-list-item-header{
      cursor: pointer;
      display:flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      height: 60px;
      font-weight: bold;
      .color();
      .portal-list-item-header-close{
        width: 40px;
        height: 20px;
        background-color:#fff;
        display:flex;
        align-items: center;
        justify-content:center;
        .boxshadow(1px,2px,2px,.bgColor());
        // box-shadow: 0 0 5px 2px #333;
        .color()
      }
    }
    .portal-list-item{
      cursor: pointer;
      display:flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      padding:8px;
      height: 80px;
      border-bottom:1px solid;
      .borderColor(border-bottom-color);
      .color();
      // color: #ffffff !important;
      &:hover{
        .bgColor();
        color: #ffffff !important;
        // .color();
        // .boxshadow(1px,2px,2px,.bgColor());
        // box-shadow: 1px 2px 5px #333;
        // color: #fff !important;
      }
      &:last-child{
        border:none;
      }
    }
  }
}

</style>